<template>
  <div class="container-index">
    <!-- 搜索 -->
    <div class="city-search">
      <view class="section">
        <picker @change="bindPickerChange"  :value="cityIndex" range-key="name" :range="objectArray">
          <view class="picker">
            地区：{{ objectArray[cityIndex].name }}
            <van-icon name="arrow-down" size="15" style="margin-left: 10rpx;" />
          </view>
        </picker>
      </view>
      <view style="position: relative;">
        <van-icon name="search" size="15" class="postion-search" />
        <input placeholder="写点东西吧" class="postion-search-input"></input>
      </view>
    </div>
    <div class="div-one">
      <!-- 轮播 -->
      <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item><image src="/static/imgs/beijing.png" class="swiper-item-image"></image></swiper-item>
        <swiper-item><image src="/static/imgs/jiangxi.jpg" class="swiper-item-image"></image></swiper-item>
        <swiper-item><image src="/static/imgs/tmpbe7.jpg" class="swiper-item-image"></image></swiper-item>
      </swiper>
      <!-- 一些图片啥的啊 -->
      <div style="margin-top: 20rpx;display: flex; justify-content: space-between;">
        <div v-for="(item,index) in zList" :key="index">
          <view style="text-align: center;">
            <image :src="item.img" style="width: 126rpx; height: 126rpx;" @tap="eventConsole"></image>
            <view>{{ item.name }}</view>
          </view>
        </div>
      </div>
    </div>
    <!-- 喜欢读书 -->
    <div style="margin: 20rpx;">
      <div class="flex-between-align" style="margin: 20rpx;">
        <div class="font-s-32" style="color: #333333;">读书打卡</div>
        <div class="font-s-24" style="color: #888888;">更多</div>
      </div>

      <div style="background: #fff; padding: 20rpx; border-radius: 10rpx; display: flex; justify-content: space-around; margin-bottom: 20rpx;" @tap="goArticleDetailPage">
        <image src="/static/imgs/huozhe.png" style="width: 200rpx;height: 208rpx; object-fit: cover;"></image>
        <div style="width: 400rpx; display: flex; flex-direction: column; justify-content: space-between;">
          <div style="font-size: 32rpx;font-weight: 500;color: #1a1a1a;">《盛道和夫自专》</div>
          <div style="height: 110rpx;width: 396rpx;background: #f8f8f8;border-radius: 8rpx;padding: 20rpx;font-size: 24rpx;">读书打卡详细，读书打卡详细，读书打卡详细</div>
          <div style="color: #666666;font-size: 24rpx;">看到第几章：56</div>
        </div>
      </div>

      <div v-for="(item, index) in articleDetail" :key="index" style="background: #fff; padding: 20rpx; border-radius: 10rpx; display: flex; justify-content: space-around; margin-bottom: 20rpx;" @tap="goLazyLoadingPage">
        <image :src="item.image" style="width: 200rpx;height: 208rpx; object-fit: cover;"></image>
        <div style="width: 400rpx; display: flex; flex-direction: column; justify-content: space-between;">
          <div style="font-size: 32rpx;font-weight: 500;color: #1a1a1a;">{{item.title}}</div>
          <div style="height: 110rpx;width: 396rpx;background: #f8f8f8;border-radius: 8rpx;padding: 20rpx;font-size: 24rpx;">{{item.content}}</div>
          <div style="color: #666666;font-size: 24rpx;">{{item.count}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { byLevelGetUserInfo } from "../utils/wxUtil";
import { user_getXCXOpenId } from "../utils/project-api";
import {mapState} from 'vuex'

export default {
  data() {
    return {
      ads: [],
      test: "测试",
      value: "",
      zList:[
        {
          name: '读什么书',
          img: require('../../static/imgs/dushu.png')
        },
        {
          name: '有资料',
          img: require('../../static/imgs/guanwang.png')
        },
        {
          name: '写点什么',
          img: require('../../static/imgs/xuexi.png')
        },
        {
          name: '偷偷fly',
          img: require('../../static/imgs/huodong.png')
        }
      ],

      cityIndex: 0,
      array: ['美国', '中国', '巴西', '日本'],
      objectArray: [
        { id: 0, name: '美国' },
        { id: 1, name: '中国' },
        { id: 2, name: '巴西' },
        { id: 3, name: '日本' }
      ],
      html_content: '',
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
      tmpArticleDetail: [
        {
          title: '《懒加载自传》',
          content: '读书打卡详细，读书打卡详细，读书打卡详细',
          count: '看到第几章：56',
          image: '/static/imgs/huozhe.png'
        },
        {
          title: '《还有啥啊》',
          content: '读书打卡详细，读书打卡详细，读书打卡详细',
          count: '看到第几章：32',
          image: '/static/imgs/huozhe.png'
        }
      ]
    };
  },

  computed: {
    ...mapState(['articleDetail'])
  },
  //点击获取用户信息接口返回信息
  methods: {
    bindPickerChange(e) {
      console.log('picker发送选择改变，携带值为', e)
      // console.log('picker发送选择改变，携带值为', e.detail.value)
      this.cityIndex = e.mp.detail.value
    },

    getAd() {
      user_getXCXOpenId({}, res => {
        if (res.result) {
          console.log("---------");
        }
      });
    },
    eventConsole() {
      console.log('打印一下@click好不好使')
      this.$store.dispatch('getArticleDetail', this.tmpArticleDetail)
      console.log('articleDetail', this.$store.state.articleDetail)

    },
    goArticleDetailPage() {
      this.$router.push({
        path: "/pages/index/articleDetail"
      });
    },
    goLazyLoadingPage() {
      this.$router.push({
        path: "/pages/index/lazyLoading"
      });
    }
  },

  async beforeMount() {
    console.log('隨便打印一下，看看这个刷新好不好使')
    this.test = "这是数据双向绑定";
    // let userInfo = await byLevelGetUserInfo(3);
    // "navigationStyle": "custom"  Example
  },

  // 分享小程序(用户点击右上角转发)
  onShareAppMessage(res) {
    let shareJson = this.$shareUtil({
      title: mch_info.name,
      path: `/pages/index/main?`
    });
    console.log("分享:" + JSON.stringify(shareJson));
    return shareJson;
  },
  // 首页的刷新
  onPullDownRefresh: function () {
    console.log('这是"首页的"下拉刷新的方法！')
    wx.showNavigationBarLoading() //在标题栏中显示加载

    setTimeout(function () {

      wx.hideNavigationBarLoading() //完成停止加载

      wx.stopPullDownRefresh() //停止下拉刷新

    }, 1500);
  },
};
</script>
<style scoped>
  .container-index{
    width: 100%;
  }
  .section{
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }
  .section .picker{
    display: flex;
    align-items: center;
  }
  .postion-search{
    position: absolute;
    top: 16rpx;
    left: 16rpx;
    z-index:99;
  }
  .postion-search-input{
    width: 518rpx;
    height: 62rpx;
    background: #F7F7F7;
    border: 1px solid #cccccc;
    border-radius: 30rpx;
    padding: 0 20rpx 0 60rpx;
  }
  .swiper{
    width: 100% !important;
  }
  .swiper-item-image{
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
  .image-radius{
    height: 200rpx;
    width: 200rpx;
    border-radius: 100rpx;
    object-fit: cover;
    margin-top: 40rpx;
  }
  /* 最上面的轮播之类的 */
  .div-one{
    background: linear-gradient(#ffffff 0%, #ffffff 58%, #f5f5f5 100%);
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
    padding: 0 20rpx 20rpx 20rpx;
  }

  .city-search{
    width:100%;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:sticky;
    top: 0px;
    z-index: 99;
    background: #ffffff
  }

  .icon-search{
    position: absolute;
    top: 18rpx;
    left: 16rpx;
    z-index:999;
    background-image: url(../../static/imgs/icon_search.png); /*引入图片图片*/
    background-repeat: no-repeat; /*设置图片不重复*/
    background-position: 0px 0px; /*图片显示的位置*/
    width: 40rpx; /*设置图片显示的宽*/
    height: 40rpx; /*图片显示的高*/
  }

</style>


